/*  字体的格数是  36 * 17 */

.smallDiv {
    width: 35px;
    height: 35px;
    /*border:1px solid;*/
    float: left;
    z-index: 2;
}

.newLineDiv {
    width: 35px;
    height: 35px;
    /*border:1px solid;*/
}

.firstDiv {
    margin: auto;
    width: 1260px !important;
    height: 595px !important;
    display: block;
    width: 100%;
    text-align: center;
}

.secondeDiv {
    /*height: 1000px;*/
    width: 100%;
    z-index: 1;
}

.bodyClass {
    height: 100%;
    width: 100%;
    background: url(../../img/headBackImageSmall.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}


/*css 动画  效果*/


/*翻转效果  动画的 帧 */
@-webkit-keyframes revolving {
    0% {-webkit-transform: perspective(500px) rotateX(0deg);}
    25% {-webkit-transform: perspective(500px) rotateX(90deg);}
    50% {-webkit-transform: perspective(500px) rotateX(180deg);}
    75% {-webkit-transform: perspective(500px) rotateX(270deg);}
    100% {-webkit-transform: perspective(500px) rotateX(360deg);}
}


/* 滚动效果 动画 */

@keyframes animated_div
{
	0%	{transform: rotate(0deg);left:0px;}
	25%	{transform: rotate(-20deg);left:0px;}
	50%	{transform: rotate(0deg);left:100px;}
	55%	{transform: rotate(0deg);left:100px;}
	70%	{transform: rotate(0deg);left:100px;}
	100%{transform: rotate(0deg);left:0px;}
	0%   {transform:perspective(0px) ;}
	25%  {transform:perspective(40px);}
	50%  {transform:perspective(80px);}
	55%  {transform:perspective(120px);}
	70%  {transform:perspective(160px);}
	100% {transform:perspective(200px);}
}

@keyframes animated_bigPic
{
    0%  {transform: scale(1);}
    25% {transform: scale(2);}
    50% {transform: scale(4);}
    75% {transform: scale(6);}
    100%{transform: scale(8);}
}


/*放大字体的动画*/

@-webkit-keyframes animated_div {

    0%  {-webkit-transform: perspective(0px) scale(1);}
    20% {-webkit-transform: perspective(5px) scale(1.2);}
    40% {-webkit-transform: perspective(10px) scale(1.4);}
    60% {-webkit-transform: perspective(15px) scale(1.5);}
    80% {-webkit-transform: perspective(10px) scale(1.3);}
    100%{-webkit-transform: perspective(0px) scale(1);}
}

/* 放大和缩小图片 */

@-webkit-keyframes bigPicture {
    0%  {transform: scale(1);}
    100%{transform: scale(10);}
}
@-webkit-keyframes bigPictureAni {
    0%  {transform: scale(1);}
    100%{transform: scale(8);}
}

@-webkit-keyframes movePictureAction {
    0%  {transform: scale(1);}
    5%  {transform: scale(1.2);}
    10% {transform: scale(1.4);}
    15% {transform: scale(1.6);}
    20% {transform: scale(1.8);}
    25% {transform: scale(2);}
    30% {transform: scale(2.2);}
    35% {transform: scale(2.4);}
    40% {transform: scale(2.6);}
    45% {transform: scale(2.8);}
    50% {transform: scale(3);}
    55% {transform: scale(3.2);}
    60% {transform: scale(3.4);}
    65% {transform: scale(3.6);}
    70% {transform: scale(3.4);}
    75% {transform: scale(3);}
    80% {transform: scale(2.6);}
    85% {transform: scale(2.2);}
    90% {transform: scale(1.8);}
    95% {transform: scale(1.4);}
    100%{transform: scale(1);}
}

/*  图片小动画*/
@keyframes rubberBand {
    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
    30% {
        -webkit-transform: scaleX(2.5) scaleY(1.5);
        -ms-transform: scaleX(2.5) scaleY(1.5);
        transform: scaleX(2.5) scaleY(1.5)
    }
    40% {
        -webkit-transform: scaleX(1.5) scaleY(2.5);
        -ms-transform: scaleX(1.5) scaleY(2.5);
        transform: scaleX(1.5) scaleY(2.5)
    }
    60% {
        -webkit-transform: scaleX(2.3) scaleY(1.7);
        -ms-transform: scaleX(2.3) scaleY(1.7);
        transform: scaleX(2.3) scaleY(1.7)
    }
    100% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes wobble {
    0% {
        -webkit-transform: translateX(0%);
        -ms-transform: translateX(0%);
        transform: translateX(0%)
    }
    15% {
        -webkit-transform: translateX(-30%) rotate(-5deg) scale(3);
        -ms-transform: translateX(-30%) rotate(-5deg) scale(3);
        transform: translateX(-30%) rotate(-5deg) scale(3)
    }
    30% {
        -webkit-transform: translateX(25%) rotate(3deg) scale(2);
        -ms-transform: translateX(25%) rotate(3deg) scale(2);
        transform: translateX(25%) rotate(3deg) scale(2)
    }
    45% {
        -webkit-transform: translateX(-20%) rotate(-3deg) scale(1.5);
        -ms-transform: translateX(-20%) rotate(-3deg) scale(1.5);
        transform: translateX(-20%) rotate(-3deg) scale(1.5)
    }
    60% {
        -webkit-transform: translateX(10%) rotate(2deg) scale(1.3);
        -ms-transform: translateX(10%) rotate(2deg) scale(1.3);
        transform: translateX(10%) rotate(2deg) scale(1.3)
    }
    75% {
        -webkit-transform: translateX(-5%) rotate(-1deg) scale(1.1);
        -ms-transform: translateX(-5%) rotate(-1deg) scale(1.1);
        transform: translateX(-5%) rotate(-1deg) scale(1.1)
    }
    100% {
        -webkit-transform: translateX(0%) scale(1);
        -ms-transform: translateX(0%) scale(1);
        transform: translateX(0%) scale(1)
    }
}

@keyframes bounceInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px) scale(3);
        -ms-transform: translateY(-2000px) scale(3);
        transform: translateY(-2000px) scale(3)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(30px) scale(2);
        -ms-transform: translateY(30px) scale(2);
        transform: translateY(30px) scale(2)
    }
    80% {
        -webkit-transform: translateY(-10px) scale(1.5);
        -ms-transform: translateY(-10px) scale(1.5);
        transform: translateY(-10px) scale(1.5)
    }
    100% {
        -webkit-transform: translateY(0) scale(1);
        -ms-transform: translateY(0) scale(1);
        transform: translateY(0) scale(1)
    }
}

@keyframes bounceOut {
    0% {
        -webkit-transform: scale(3);
        -ms-transform: scale(3);
        transform: scale(3)
    }
    25% {
        -webkit-transform: scale(1.5);
        -ms-transform: scale(1.5);
        transform: scale(1.5)
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(2);
        -ms-transform: scale(12);
        transform: scale(2)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
        transform: scale(0.5)
    }
}

@keyframes flip {
    0% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
        -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
        transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    40% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(2);
        -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(2);
        transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    50% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(3);
        -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(3);
        transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    80% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1.5);
        -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1.5);
        transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    100% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
        -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
        transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
}

@keyframes hinge {
    0% {
        -webkit-transform: rotate(0) scale(1);
        -ms-transform: rotate(0) scale(1);
        transform: rotate(0) scale(1);
        -webkit-transform-origin: top left;
        -ms-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    20%,
    60% {
        -webkit-transform: rotate(80deg) scale(2);
        -ms-transform: rotate(80deg) scale(2);
        transform: rotate(80deg) scale(2);
        -webkit-transform-origin: top left;
        -ms-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    40% {
        -webkit-transform: rotate(60deg) scale(3);
        -ms-transform: rotate(60deg) scale(3);
        transform: rotate(60deg) scale(3);
        -webkit-transform-origin: top left;
        -ms-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    80% {
        -webkit-transform: rotate(60deg) translateY(0) scale(2);
        -ms-transform: rotate(60deg) translateY(0) scale(2);
        transform: rotate(60deg) translateY(0) scale(2);
        -webkit-transform-origin: top left;
        -ms-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1
    }
    100% {
        -webkit-transform: translateY(700px) scale(1);
        -ms-transform: translateY(700px) scale(1);
        transform: translateY(700px) scale(1);
        opacity: 0
    }
}

@keyframes zoomOutRight {
    40% {
        opacity: 1;
        -webkit-transform: scale(2) translateX(-42px);
        -ms-transform: scale(2) translateX(-42px);
        transform: scale(2) translateX(-42px);
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(.5) translateX(2000px);
        -ms-transform: scale(.5) translateX(2000px);
        transform: scale(.5) translateX(2000px);
        -webkit-transform-origin: right center;
        -ms-transform-origin: right center;
        transform-origin: right center
    }
}



